<template>
  <div class="config-box">
    <div class="config-box-top">
      <SettingItem name="名称">
        <n-input size="small" v-model:value="fileInfo.name"></n-input>
      </SettingItem>
      <SettingItem name="类型">
        <n-input size="small" v-model:value="fileInfo.type" disabled></n-input>
      </SettingItem>
      <SettingItem name="大小">
        <n-input size="small" :value="fileInfo.size" disabled></n-input>
      </SettingItem>
      <SettingItem name="创建时间">
        <n-input size="small" :value="fileInfo.createTime" disabled></n-input>
      </SettingItem>
      <SettingItem name="修改时间">
        <n-input size="small" :value="fileInfo.updateTime" disabled></n-input>
      </SettingItem>
      <SettingItem name="链接地址">
        <n-space>
          <div class="ellipse">
            {{ fileInfo.url }}
          </div>
          <!-- <n-input size="small" :value="fileInfo.url" disabled></n-input> -->
          <n-button
            type="primary"
            size="small"
            secondary
            stonger
            @click="copyToClipboard(fileInfo.url)"
            >复制</n-button
          >
        </n-space>
      </SettingItem>
      <SettingItem name="状态">
        <div style="display: flex">
          <n-switch
            v-model:value="fileInfo.status"
            size="large"
            :round="false"
            :checked-value="1"
            :unchecked-value="0"
          />
        </div>
      </SettingItem>
    </div>
    <div class="config-box-bottom">
      <n-space vertical>
        <n-button style="width: 100%" type="primary">保存</n-button>
        <n-button style="width: 100%" type="error">删除</n-button>
      </n-space>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { useMessage } from "naive-ui";
import { PropType } from "vue";
import SettingItem from "@/pages/editor/components/config-panel/components/item.vue";
const message = useMessage();
const props = defineProps({
  value: Object as PropType<any>,
});
// const emits = defineEmits(["modelValue:update"]);
const fileInfo = ref({
  id: 28,
  createTime: "2024-01-18 13:07:20",
  updateTime: "2024-01-18 13:07:20",
  uid: "756b6ea0-b5bf-11ee-b65e-4bd8e1b62ce2",
  name: "6301307F-0F0F-46A5-9F63-2A1DCEF8AAE3.MOV",
  isFolder: false,
  url: "",
  size: 969576,
  type: "",
  parentId: "1",
  status: 1,
  from_user: 1,
});
watch(
  () => props.value,
  (val) => {
    fileInfo.value = val;
  },
  {
    immediate: true,
  }
);
// watch(
//   () => fileInfo.value,
//   (val) => {
//     emits("modelValue:update", val);
//   },
//   {
//     immediate: true,
//   }
// );
function copyToClipboard(text) {
  var textarea = document.createElement("textarea"); //创建临时元素
  textarea.value = text; //设置值为需要复制的内容
  document.body.appendChild(textarea); //将该元素添加到页面上
  textarea.select(); //选中输入框中的内容
  try {
    var successful = document.execCommand("copy"); //执行复制命令
    message.success("已复制到剪贴板");
  } catch (err) {
    message.error("无法复制到剪贴板");
  } finally {
    document.body.removeChild(textarea); //移除临时元素
  }
}
</script>

<style lang="scss" scoped>
.config-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  .config-box-top {
    flex: 1;
  }
}
.ellipse {
  width: 125px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 28px;
}
</style>
